<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="../../zxt/zxt.js"></script>
		<script>
			importZXT("../../zxt");
		</script>
		<style>
			.myBar {
				border-right: 1px solid #999999;
				border-bottom: 1px solid #999999;
				border-top: 1px solid #999999;
				border-left: 1px solid #999999;
			}
			.myBar div {
				font-size: 12px;
				font-weight: Bold;
			}
		</style>

	</head>

	<body class="bodyBackground">

		<div id="c1"  zxt="zxt.ui.Columns" style="background-color:#f3f8e6;" class="myBar">
			<div>
				ABCDEFG
			</div>
			<img src="../../zxt/images/efgrid_blue_divider.gif" />
			<div zxt.end="true">
				HIJKLMN
			</div>
		</div>

		<table>
			<tr>
				<td>getType()</td>
				<td>返回控件类型</td>
				<td><input type="button" name="getType" value="getType" 
					onclick="alert('表格列控件的type为'+$zxtUI.c1.getType());"/></td>
			</tr>
			<tr>
				<td>addElement(elem,end)</td>
				<td>插入传入的DOM元素</td>
				<td><input type="button" name="addElement" value="addElement" 
					onclick="$zxtUI.c1.addElement('<div>addElement</div>',false);alert('表格列控件增加了dom节点');"/></td>
			</tr>
			<tr>
				<td>endAppend(elem)</td>
				<td>在原有控件后面插入传入的DOM元素 </td>
				<td><input type="button" name="endAppend" value="endAppend" 
					onclick="$zxtUI.c1.endAppend('<div>endAppend</div>');alert('表格列在后面增加了dom节点');"/></td>
			</tr>
			<tr>
				<td>frontAppend(elem)</td>
				<td>在原有控件前面插入传入的DOM元素</td>
				<td><input type="button" name="frontAppend" value="frontAppend" 
					onclick="$zxtUI.c1.frontAppend('<div>frontAppend</div>');alert('表格列在前面增加了dom节点');"/></td>
			</tr>
		</table>
		
		<hr>

		<div id="c2"  zxt="zxt.ui.Rows" style="background-color:#f3f8e6; height:200px" class="myBar">
			<div>
				ABCDEFG
			</div>
			<div>
				ABCDEFG
			</div>
			<div zxt.end="true">
				HIJKLMN
			</div>
		</div>

		<table>
			<tr>
				<td>getType()</td>
				<td>返回控件类型型</td>
				<td><input type="button" name="getType" value="getType" 
					onclick="alert('表格行控件的type为'+$zxtUI.c2.getType());"/></td>
			</tr>
			<tr>
				<td>addElement(elem,end)</td>
				<td>插入传入的DOM元素</td>
				<td><input type="button" name="addElement" value="addElement" 
					onclick="$zxtUI.c2.addElement('<div>addElement</div>',false);alert('表格行控件增加了dom节点');"/></td>
			</tr>
			<tr>
				<td>endAppend(elem)</td>
				<td>在原有控件后面插入传入的DOM元素 </td>
				<td><input type="button" name="endAppend" value="endAppend" 
					onclick="$zxtUI.c2.endAppend('<div>endAppend</div>');alert('表格行在后面增加了dom节点');"/></td>
			</tr>
			<tr>
				<td>frontAppend(elem)</td>
				<td>在原有控件前面插入传入的DOM元素</td>
				<td><input type="button" name="frontAppend" value="frontAppend" 
					onclick="$zxtUI.c2.frontAppend('<div>frontAppend</div>');alert('表格行在前面增加了dom节点');"/></td>
			</tr>
		</table>
		
		<hr>

		<div id="c3"  zxt="zxt.ui.Rows" class="myBar">
			<div>
				Header
			</div>

			<div zxt="zxt.ui.Rows">
				<div zxt="zxt.ui.Columns">
					<div>
						AAAAAAAAAAAAAAA
					</div>
					<div>
						BBBBBBBBBBBBBBB
					</div>
				</div>
				<div zxt="zxt.ui.Columns">
					<div>
						CCCCCCCCCCCCCC
					</div>
					<div>
						DDDDDDDDDDDDDD
					</div>
				</div>
			</div>
		</div>
		
		<div>
			<a href="../index.html">返回</a>
		</div>
	</body>

</html>

<script type="text/javascript"">

$zxt.init();</script>